/* header 登录转换 */
let uidn = localStorage.getItem('uid');
if (uidn != null) {
    let username = localStorage.getItem('username');
    $('#login').html(username).click(function(){
        var userRes = confirm('是否要退出登录');
        if(userRes == true){
            localStorage.removeItem('uid');
            localStorage.removeItem('username');
            location.href = './index.html';
        }
    })
}else{
    $('#login').html('登录').click(function(){
        location.href = './pages/login.html';
    })
}

/* 页面加载 */
/* nav下拉跳转 */
$("#nav div ul").on('click', 'li', function () {
    localStorage.setItem('pclass', $(this).attr('pclass'));
    localStorage.setItem('pid', $(this).attr('pid'));
    location.href = './pages/infor.html';
})


//banner
/* 轮播图 */
$('#myCarousel').carousel({
    interval: 2000
})
axios.get('http://localhost:3000/pb')
    .then(function (res) {
        var hb1 = `<img src="${res.data[0].img[0]}" pid="${res.data[0].id}" pclass="${res.data[0].pclass}" alt="First slide">`;
        var hb2 = `<img src="${res.data[1].img[0]}" pid="${res.data[1].id}" pclass="${res.data[1].pclass}" alt="Second slide">`;
        var hb3 = `<img src="${res.data[2].img[0]}" pid="${res.data[2].id}" pclass="${res.data[2].pclass}" alt="Third slide">`;
        $("#banner .carousel-inner .item").eq(0).html(hb1);
        $("#banner .carousel-inner .item").eq(1).html(hb2);
        $("#banner .carousel-inner .item").eq(2).html(hb3);
    })
    .catch(function (err) {
        console.log(err)
    })

$("#banner #myCarousel .carousel-inner div").click(function () {
    localStorage.setItem('pclass', $(this).find('img').attr('pclass'));
    localStorage.setItem('pid', $(this).find('img').attr('pid'));
    location.href = './pages/infor.html';
})

/* main */
//m1
axios.get('http://localhost:3000/pm1')
    .then(function (res) {
        var hm11 = `<img src="${res.data[0].img[0]}" alt="" pid="${res.data[0].id}" pclass="${res.data[0].pclass}">`;
        var hm12 = `<img src="${res.data[1].img[0]}" alt="" pid="${res.data[1].id}" pclass="${res.data[1].pclass}">`;
        $("#m11").html(hm11);
        $("#m12").html(hm12);
    })
    .catch(function (err) {
        console.log(err)
    })
$("#m1 .box div").click(function () {
    localStorage.setItem('pclass', $(this).find('img').attr('pclass'));
    localStorage.setItem('pid', $(this).find('img').attr('pid'));
    location.href = './pages/infor.html';
})

//m2
axios.get('http://localhost:3000/pn1')
    .then(function (res) {
        var hm2 = '';
        for (let i = 0; i < 4; i++) {
            hm2 += `<div id="m2${+i + 1}" pid="${res.data[i].id}" pclass="${res.data[i].pclass}">
    <img src="${res.data[i].img[0]}" alt="">
    <h2>${res.data[i].title}</h2>
    <p>${res.data[i].intro}</p>
    <span>${res.data[i].price}</span>
</div>`
        }
        $("#m2 .box").html(hm2)
    })
    .catch(function (err) {
        console.log(err)
    })
$("#m2 .box").on('click', 'div', function () {
    localStorage.setItem('pclass', $(this).attr('pclass'));
    localStorage.setItem('pid', $(this).attr('pid'));
    location.href = './pages/infor.html';
})

//m3
axios.get('http://localhost:3000/pm3')
    .then(function (res) {
        var hm3 = `<img src="${res.data[0].img[5]}" pid="${res.data[0].id}" pclass="${res.data[0].pclass}">`;
        $("#m3").eq(0).html(hm3);
    })
    .catch(function (err) {
        console.log(err)
    })
$("#m3").on('click', 'img', function () {
    localStorage.setItem('pclass', $(this).attr('pclass'));
    localStorage.setItem('pid', $(this).attr('pid'));
    location.href = './pages/infor.html';
})

//m4轮播图
$('#m4').carousel({
    interval: 1500
})
axios.get('http://localhost:3000/pm4')
    .then(function (res) {
        var hm41 = `<img src="${res.data[0].img[0]}" pid="${res.data[0].id}" pclass="${res.data[0].pclass}" alt="First slide">`;
        var hm42 = `<img src="${res.data[1].img[0]}" pid="${res.data[1].id}" pclass="${res.data[1].pclass}" alt="Second slide">`;
        var hm43 = `<img src="${res.data[2].img[0]}" pid="${res.data[2].id}" pclass="${res.data[2].pclass}" alt="Third slide">`;
        $("#m4 .carousel-inner .item").eq(0).html(hm41);
        $("#m4 .carousel-inner .item").eq(1).html(hm42);
        $("#m4 .carousel-inner .item").eq(2).html(hm43);
    })
    .catch(function (err) {
        console.log(err)
    })

$("#m4 #myCarousel .carousel-inner div").click(function () {
    console.log(111)
    console.log(this)
    localStorage.setItem('pclass', $(this).find('img').attr('pclass'));
    localStorage.setItem('pid', $(this).find('img').attr('pid'));
    location.href = './pages/infor.html';
})

//m5
axios.get('http://localhost:3000/pn3')
    .then(function (res) {
        var hm5 = '';
        for (let i = 0; i < 4; i++) {
            hm5 += `<div id="m5${+i + 1}" pid="${res.data[i].id}" pclass="${res.data[i].pclass}">
    <img src="${res.data[i].img[0]}" alt="">
    <h2>${res.data[i].title}</h2>
    <p>${res.data[i].intro}</p>
    <span>${res.data[i].price}</span>
</div>`
        }
        $("#m5 .box").html(hm5)
    })
    .catch(function (err) {
        console.log(err)
    })
$("#m5 .box").on('click', 'div', function () {
    localStorage.setItem('pclass', $(this).attr('pclass'));
    localStorage.setItem('pid', $(this).attr('pid'));
    location.href = './pages/infor.html';
})

//m6
axios.get('http://localhost:3000/pm6')
    .then(function (res) {
        var hm6 = `<img src="${res.data[0].img[5]}" pid="${res.data[0].id}" pclass="${res.data[0].pclass}">`;
        $("#m6").eq(0).html(hm6);
    })
    .catch(function (err) {
        console.log(err)
    })
$("#m6").on('click', 'img', function () {
    localStorage.setItem('pclass', $(this).attr('pclass'));
    localStorage.setItem('pid', $(this).attr('pid'));
    location.href = './pages/infor.html';
})

//m7
axios.get('http://localhost:3000/pn2')
    .then(function (res) {
        var hm7 = '';
        for (let i = 0; i < 4; i++) {
            hm7 += `<div id="m7${+i + 1}" pid="${res.data[i].id}" pclass="${res.data[i].pclass}">
    <img src="${res.data[i].img[0]}" alt="">
    <h2>${res.data[i].title}</h2>
    <p>${res.data[i].intro}</p>
    <span>${res.data[i].price}</span>
</div>`
        }
        $("#m7 .box").html(hm7)
    })
    .catch(function (err) {
        console.log(err)
    })
$("#m7 .box").on('click', 'div', function () {
    localStorage.setItem('pclass', $(this).attr('pclass'));
    localStorage.setItem('pid', $(this).attr('pid'));
    location.href = './pages/infor.html';
})
    /* main */
